import TableRender from '@/render/TableRender'
import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import { TabPane, Tabs } from 'ant-design-vue'
import toNative from '@/utils/toNative'
import Drawer from '@/components/drawer/Index'
import type { CompanyProductInfoDto, EleSignInfoDto, PayWageInfoDto } from '@/api/company/types'
import DetailData from './DetailData'
import BasicInfo from './BasicInfo'
import ContractRecord from './ContractRecord'
import ContractTemplate from './ContractTemplate'
import ConsumeRecord from './ConsumeRecord'
// import DataSummary from './DataSummary'
// import SaleRecord from './SaleRecord'
// import PaywageRecord from './PaywageRecord'
import { getElesignInfo, getPayWageInfo } from '@/api/company'

@Component
export class DrawerEleSignDetail extends TableRender {
    @Prop({ default: false }) show!: boolean
    @Prop() companyId!: number
    @Prop() companyProductInfo!: CompanyProductInfoDto

    showDrawer = false

    activeName = 'basicInfo'

    eleSignInfo = {} as EleSignInfoDto

    @Emit('update:show')
    updateShow(val: boolean) {
        return val
    }

    @Watch('show')
    async handleWatchShow() {
        this.showDrawer = this.show
        if (this.showDrawer) {
            await this.initData()
        }
    }
    @Emit('refresh')
    handleRefresh() {}

    @Watch('showDrawer', { immediate: true })
    handleWatchShowDialog() {
        this.updateShow(this.showDrawer)
    }

    async initData() {
        const res = await getElesignInfo(this.companyId)
        this.eleSignInfo = res
    }

    render() {
        return (
            <>
                <Drawer
                    v-model:show={this.showDrawer}
                    size={1080}
                    resetStyle={true}
                    closable={false}
                    hideCancel={true}
                    v-slots={{
                        default: () => {
                            return <div class="h-full flex flex-col">
                                <DetailData eleSignInfo={this.eleSignInfo} companyProductInfo={this.companyProductInfo}/>
                                <Tabs class="flex-1" v-model:value={this.activeName}>
                                    <TabPane key="basicInfo" tab="基本信息">
                                        <BasicInfo eleSignInfo={this.eleSignInfo} companyProductInfo={this.companyProductInfo} onRefresh={this.initData}/>
                                    </TabPane>
                                    <TabPane key="data" tab="合同记录">
                                        <ContractRecord eleSignInfo={this.eleSignInfo} companyProductInfo={this.companyProductInfo}/>
                                    </TabPane>
                                    <TabPane key="saleInfo" tab="合同模板">
                                        <ContractTemplate eleSignInfo={this.eleSignInfo} companyProductInfo={this.companyProductInfo}/>
                                    </TabPane>
                                    <TabPane key="consumeRecord" tab="消耗记录">
                                        <ConsumeRecord eleSignInfo={this.eleSignInfo} companyProductInfo={this.companyProductInfo}/>
                                    </TabPane>
                                </Tabs>
                            </div>
                        }
                    }}
                ></Drawer>
            </>
        )
    }
}

export default toNative<{companyId: number, companyProductInfo: CompanyProductInfoDto }, { refresh: () => void }>(DrawerEleSignDetail)
